<template>
  <context-menu v-model:show="menuShow" :options="optionsComponent" ref="rightMenuBtnRef">
    <!-- <context-menu-item @click="refreshCurrentPage">
      <el-icon><Refresh /></el-icon>
      {{ $t('tabs.refresh') }}
    </context-menu-item> -->
    <context-menu-item @click="maximize">
      <el-icon><FullScreen /></el-icon>
      {{ $t('tabs.maximize') }}
    </context-menu-item>
    <context-menu-item @click="closeCurrentTab">
      <el-icon><Remove /></el-icon>
      {{ $t('tabs.closeCurrent') }}
    </context-menu-item>
    <context-menu-item @click="tabStore.closeTabsOnSide(route.fullPath, 'left')">
      <el-icon><DArrowLeft /></el-icon>
      {{ $t('tabs.closeLeft') }}
    </context-menu-item>
    <context-menu-item @click="tabStore.closeTabsOnSide(route.fullPath, 'right')">
      <el-icon><DArrowRight /></el-icon>
      {{ $t('tabs.closeRight') }}
    </context-menu-item>
    <context-menu-item @click="closeOtherTab">
      <el-icon><CircleClose /></el-icon>
      {{ $t('tabs.closeOther') }}
    </context-menu-item>
    <context-menu-item @click="closeAllTab">
      <el-icon><FolderDelete /></el-icon>
      {{ $t('tabs.closeAll') }}
    </context-menu-item>
  </context-menu>
</template>

<script setup lang="ts" name="RightMenuBtn">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useTabsStore } from '@/stores/modules/tabs';
import { useAppStore } from '@/stores/modules/app';
import { useKeepAliveStore } from '@/stores/modules/keepAlive';
import { usePageRefresh } from '@/hooks/usePageRefresh';
import { Refresh, FullScreen, Remove, DArrowLeft, DArrowRight, CircleClose, FolderDelete } from '@element-plus/icons-vue';
import { HOME_URL } from '@/config';
import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from '@imengyu/vue3-context-menu';
const route = useRoute();
const router = useRouter();
const tabStore = useTabsStore();
const appStore = useAppStore();
const keepAliveStore = useKeepAliveStore();
const { refreshCurrentPage } = usePageRefresh();

const menuShow = ref(false);
const optionsComponent = ref({ x: 500, y: 200 });

const showMenu = (e: MouseEvent) => {
  e.preventDefault();
  optionsComponent.value = { x: e.clientX, y: e.clientY };
  menuShow.value = true;
};

const maximize = () => {
  appStore.changeMaximize(true);
};

const closeCurrentTab = () => {
  if (route.meta.isAffix === 'T') return;
  tabStore.removeTabs(route.fullPath);
  keepAliveStore.removeKeepAliveName(route.name as string);
};

const closeOtherTab = () => {
  tabStore.closeMultipleTab(route.fullPath);
};

const closeAllTab = () => {
  tabStore.closeMultipleTab();
  router.push(HOME_URL);
};

defineExpose({
  showMenu
});
</script>
